<template>
  <div class="quickly h100">
    <header>
        <a @click="back">
            <van-icon name="arrow-left" size="0.32rem" color="#999999"/>
        </a>
        <span>快速咨询</span>
        <button @click="btn"><img src="/img/Ke_img/发布.png" alt="">
        </button>
    </header>
    <textarea v-model="value"
      name=""
      id=""
      cols="30"
      rows="10"
      placeholder="描述一一下您遇到的问题，以便律师提供解答"
    ></textarea>
    <input type="file" placeholder="添加图片" />
    <b>0/200字以内</b>
    <van-cell is-link @click="showPopup" class="line">问题类型</van-cell>
    <van-popup v-model="show">
      <h3>选择类型</h3>
      <div class="type">
        <button @click="hidden,getquestion" v-for="(item,index) in type" :key="index">{{item.problemStyle}}</button>
      </div>
      </van-popup>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import ajax from "@/store/modules/ke.js"
export default {
  data() {
    return {
      show: false,
      value:""
    }
  },
  created() {
    this.gettype();
  },
  computed: {
    ...mapState("ke", ["type"]),
  },
  methods:{
    back() {
        // 返回
        this.$router.push("/home/index")
      },
    showPopup() {
      this.show = true;
    },
    hidden(){
      this.show = false;
      this.$toast('类型选择成功');
    },
    btn(){
      this.$toast('发布成功');
      location.reload();
    },
    ...mapActions("ke", ["gettype"]),
    async getquestion(){
      let {data}=ajax.getquestion(this.value);
      console.log(data);
    }
  },
}
</script>

<style scoped>
    header{
      display: flex;
      justify-content: space-around;
    }
    header span{
      flex: 1;
      text-align: center;
    }
    header button{
      width: 1.08rem;
      height: .70rem;
      border: none;
    }
    header button img{
      width: 1.08rem;
      height: .70rem;
    }
    textarea{
      width: 100%;
      border: none;
    }
    input{
      width: 1.48rem;
      height: 1.48rem;
    }
    b{
      float: right;
      font-size: .24rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #AAAAAA;
    }
    h1{
      font-size: .3rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
    }
    h1 button{
      float: right;
      border: none;
      margin-right:.5rem;
      background-color: white;
    }
    .type {
      display: flex;
      flex-wrap: wrap;
    }
    h3{
      font-size: .25rem;
      margin: .1rem;
    }
    .type button{
      margin:.05rem ;
      font-size: .25rem;
    }
    .line{
      border: 1px solid;
    }
</style>